<template>
    <div class="user">
        <div class="user-main">
            <div>{{token}}</div>
            <div>{{user}}</div>
            <div>{{pwd}}</div>
        </div>
        <div class="user-footer">
            <!-- 实现“我的页面”的退出当前账号，页面跳转到登录页 -->
            <button @click="tuiClick()">退出登录</button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {stateType} from '@/store'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import { computed } from '@vue/reactivity';
const store=useStore<stateType>()
const router=useRouter()
const token=computed(()=>store.state.token)
const user=computed(()=>store.state.user)
const pwd=computed(()=>store.state.pwd)
const tuiClick=()=>{
    store.commit('getTokenqing')
    router.push('/login')
}
</script>
<style lang="scss">
    .user{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .user-main{
        width: 340px;
        height: 360px;
        border: 1px solid #ccc;
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
</style>